<template>
  <div class="container">
    <div class="pf" v-show="showHidden">
      <a href="#box-1">
        <div class="pf1">
          园长板块
        </div>
      </a>
      <a href="#box-2">
        <div class="pf1 pf2">
          家长板块
        </div>
      </a>
      <a href="#box-3">
        <div class="pf1 pf3">
          名师名园板块
        </div>
      </a>
    </div>

    <Header></Header>
    <input type="text" class="ipt" v-model="searchContent">
    <el-button class="btn" type="info" plain @click="Hidden(), search()">搜索</el-button>
    <Nav></Nav>
    <span class="demonstration" v-show="showHidden">喜讯！ 人民体育体教通与中国幼教网达成战略合作！</span>
    <div v-show="showHidden">
      <!-- 轮播图 -->
      <div class="center">
        <div class="slider">
          <el-carousel indicator-position="outside" height="450px">
            <el-carousel-item v-for="item in 4" :key="item">
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 今日亮点 -->
        <div class="star">
          <p class="star_title">今日亮点</p>
          <table class="tab">
            <router-link to="/search_select">
              <tr style="display: inline;" @click="main_sn1(index)" v-for="(sn, index) in starNews" :key="sn.id">
                <td style="width:300px;"><i class="el-icon-view"></i><a href="###">{{ sn.title }}</a>
                </td>
              </tr>
            </router-link>

          </table>
        </div>
        <!-- 园长板块 -->
        <div class="garden" id="box-1">
          <span class="garden_title">园长板块</span>
          <el-tabs type="border-card" style="margin-top: 30px;">
            <!-- preschool -->
            <el-tab-pane>
              <span slot="label"><i class="el-icon-thumb"></i> 幼教资讯</span>
              <img class="garden_image" src="../assets/main_yjzx.jpg" alt="">
              <router-link to="/search_select">
                <p @click="main_preschool(index)" v-for="(ps, index) in preschool" :key="ps.id"><a
                    style="margin-left: 10px;" href="###">{{ ps.title }}</a>
                </p>
              </router-link>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label"><i class="el-icon-thumb"></i> 园长宝典</span>
              <img class="garden_image2" src="../assets/main_yzbd.jpg" alt="">
              <router-link to="/search_select">
                <p @click="main_gardens(index)" v-for="(gi, index) in garden" :key="gi.id" v-if="index < 5"><a
                    style="margin-left: 10px;" href="###">{{
                      gi.title }}</a>
                </p>
              </router-link>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label"><i class="el-icon-thumb"></i> 幼师加油站</span>
              <img class="garden_image" src="../assets/main_ysjyz.jpg" alt="">
              <router-link to="/search_select">
                <p @click="main_teachers(index)" v-for="(ti, index) in teacher" :key="ti.id"><a style="margin-left: 10px;"
                    href="###">{{ ti.title }}</a>
                </p>
              </router-link>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label"><i class="el-icon-thumb"></i> 资源中心</span>
              <img class="garden_image2" src="../assets/main_qtzy.jpg" alt="">
              <router-link to="/search_select">
                <p @click="main_resource(index)" v-for="(ri, index) in resource" :key="ri.id"><a
                    style="margin-left: 10px;" href="###">{{ ri.title
                    }}</a>
                </p>
              </router-link>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- 家长板块 -->
        <div class="parent" id="box-2">
          <span class="garden_title">父母好帮手</span>
          <div class="parent_box">
            <a href="###">
              <router-link to="/main_parent">
                <div class="parent_box1 parentBox" @click="parent(index)" v-for="(pi, index) in parentInformation"
                  :key="pi.id">
                  <img style="width: 154px; float: left;" src="../assets/main_fmhbs1.jpg" v-if="index == 0">
                  <img style="width: 154px; float: left;height: 126px;" src="../assets/main_fmhbs2.webp"
                    v-if="index == 1">
                  <img style="width: 154px; float: left;height: 126px;" src="../assets/main_fmbhs3.png" v-if="index == 2">
                  <img style="width: 154px; float: left;height: 126px;" src="../assets/main_fmhbs4.jpg" v-if="index == 3">
                  <div>
                    <span><a style="color:blue">{{ pi.title }}</a></span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="###">{{ pi.information }}</a>
                  </div>
                </div>
              </router-link>
            </a>
          </div>
        </div>
        <!-- 名师板块 -->
        <div class="teacher" id="box-3">
          <span class="garden_title">名园名师</span><br>
          <div class="parent_box">
            <a href="###">
              <router-link to="/main_garden">
                <div @click="main_garden(index)" class="parent_box1 parentBox" v-for="(gi, index) in gInformation"
                  :key="gi.id">
                  <img style="width: 154px;float: left;" src="../assets/main_yey1.jpg" v-if="index == 0">
                  <img style="width: 154px;float: left;" src="../assets/main_yey3.jpg" v-if="index == 1">
                  <span><a style="color:blue">{{ gi.title }}</a></span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <a href="###">{{ gi.information }}</a>
                </div>
              </router-link>
            </a>

            <div>
              <router-link to="/main_teacher">
                <div @click="main_teacher(index)" class="teacher1" v-for="(ti, index) in tInformation" :key="ti.id"
                  v-if="index < 2">
                  <el-row class="demo-avatar demo-basic">

                    <el-col :span="12">
                      <div class="sub-title">名师</div>
                      <!-- <div class="demo-basic--circle">
                      <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
                    </div> -->
                      <!-- <img style="width: 154px;float: left;" src="../assets/main_yey1.jpg" v-if="index == 0">
                    <img style="width: 154px;float: left;" src="../assets/main_yey3.jpg" v-if="index == 1"> -->
                      <img v-if="index == 0" src="../assets/studyCenter_ms1.jpg" style="width:100px;height: 78px;">
                      <img v-if="index == 1" src="../assets/studyCenter_ms2.jpg" style="width:100px;height: 78px;">
                    </el-col>
                    <span>{{ ti.title }}</span><br>
                    <span style="color:greenyellow">{{ ti.information }}</span>
                  </el-row>
                </div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 搜索框输入文字点击按钮搜索 -->
    <router-link to="/search_select">
      <div class="search" @click="select(index)" v-for="(is, index) in searchContents" :key="is.id">
        <p><a href="###" class="main_search_title">{{ is.title }}</a></p>
        <a href="###">
          <div class="main_search_information">{{ is.information }}</div>
        </a>
        <p><a href="###" class="main_search_data"><i class="el-icon-timer"></i>{{ is.data }}</a></p>
      </div>
    </router-link>
    <footers></footers>
  </div>
</template>

<script>
import Header from '../components/header.vue'
import Nav from '../components/nav.vue'
import footers from '../components/footer.vue'
import eventBus from '../views/eventBus'
export default {
  name: 'first_main',
  components: {
    Header,
    Nav,
    footers,
  },
  computed: {
    //获取vuex中的用户名
    user() {
      this.username = this.$store.getters.user.userName
      // console.log(this.uid)
      // console.log(this.username)
    }
  },
  data() {
    return {
      // circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      // sizeList: ["medium"],
      starNews: [],
      preschool: [],
      garden: [],
      resource: [],
      teacher: [],
      parentInformation: [],
      gInformation: [],
      tInformation: [],
      showHidden: true,
      searchContent: [],
      searchContents: [],
      main_sn: "",
      select_title: [],
      select_content: [],
      uid: [],
      username: [],
      parent_title: [],
      parent_troduction: [],
    }
  },
  created() {
    // 搁置：获取用户id修改密码
    // setTimeout(() => {
    //   this.uid = this.$store.getters.user.id
    //   console.log(this.uid)
    //   eventBus.$emit('uid', this.uid)
    // }, 600)
  },
  mounted() {
    // 今日亮点
    this.$axios.get('/api/information/starNews')
      .then(res => {
        this.starNews = res.data
      }),
      //园长板块幼教资讯
      this.$axios.get('/api/information/preschool')
        .then(res => {
          this.preschool = res.data
        })
        .catch(err => console.log(err)),
      //园长板块园长宝典
      this.$axios.get('/api/information/garden')
        .then(res => {
          this.garden = res.data
        })
        .catch(err => console.log(err)),
      //园长板块幼师加油站
      this.$axios.get('/api/information/teacher')
        .then(res => {
          this.teacher = res.data
        })
        .catch(err => console.log(err)),
      //园长板块资源中心
      this.$axios.get('/api/information/resource')
        .then(res => {
          this.resource = res.data
        })
        .catch(err => console.log(err)),
      //父母好帮手
      this.$axios.get('/api/imgInformation/parentInformation',)
        .then(res => {
          this.parentInformation = res.data
          // console.log(res.data.troduction)
        }).catch(err => console.log(err)),
      //名师
      this.$axios.get('/api/imgInformation/tInformation')
        .then(res => {
          this.tInformation = res.data
          // console.log(this.tInformation[0].title)
          // console.log(res.data)
        })
        .catch(err => console.log(err)),
      //名园
      this.$axios.get('/api/imgInformation/gInformation')
        .then(res => {
          this.gInformation = res.data
          // console.log(res.data)
        })
        .catch(err => console.log(err))
  },
  methods: {
    //消失与隐藏
    Hidden() {
      this.showHidden = false;
    },
    //搜索功能
    search() {
      this.$axios.get(`/api/information/search/${this.searchContent}`, {
      })
        .then(res => {
          this.searchContents = res.data
          // console.log(res.data)
        })
    },
    //主页今日亮点传送数据
    main_sn1(index) {
      // this.main_sn = this.starNews[index].title
      // setTimeout(() => {
      //   eventBus.$emit('share', this.main_sn)
      // }, 300)
      this.select_title = this.starNews[index].title
      this.$axios.get(`/api/information/search_select/${this.select_title}`, {
      })
        .then(res => {
          this.select_content = res.data
          // console.log(this.select_content[0].information)
          setTimeout(() => {
            eventBus.$emit('select_content', this.select_content)
          }, 100)
          setTimeout(() => {
            eventBus.$emit('username', this.username)
          }, 100)
        })
    },
    //主页搜索传送数据
    select(index) {
      this.select_title = this.searchContents[index].title
      this.$axios.get(`/api/information/search_select/${this.select_title}`, {
      })
        .then(res => {
          this.select_content = res.data
          // console.log(this.select_content[0].information)
          setTimeout(() => {
            eventBus.$emit('select_content', this.select_content)
          }, 100)
          setTimeout(() => {
            eventBus.$emit('username', this.username)
          }, 100)
        })
    },
    //园长preschol传送数据
    main_preschool(index) {
      this.select_title = this.preschool[index].title
      this.$axios.get(`/api/information/search_select/${this.select_title}`, {
      })
        .then(res => {
          this.select_content = res.data
          // console.log(this.select_content[0].information)
          setTimeout(() => {
            eventBus.$emit('select_content', this.select_content)
          }, 100)
          setTimeout(() => {
            eventBus.$emit('username', this.username)
          }, 100)
        })
    },
    //园长garden传送数据
    main_gardens(index) {
      this.$axios.get(`/api/information/search_select/${this.garden[index].title}`, {
      })
        .then(res => {
          this.select_content = res.data
          // console.log(this.select_content[0].information)
          setTimeout(() => {
            eventBus.$emit('select_content', this.select_content)
          }, 100)
          setTimeout(() => {
            eventBus.$emit('username', this.username)
          }, 100)
        })
    },
    //园长garden传送数据
    main_teachers(index) {
      // console.log('123')
      this.select_title = this.teacher[index].title
      this.$axios.get(`/api/information/search_select/${this.select_title}`, {
      })
        .then(res => {
          this.select_content = res.data
          // console.log(this.select_content[0].information)
          setTimeout(() => {
            eventBus.$emit('select_content', this.select_content)
          }, 100)
          setTimeout(() => {
            eventBus.$emit('username', this.username)
          }, 100)
        })
    },
    //园长resource传送数据
    main_resource(index) {
      this.select_title = this.resource[index].title
      this.$axios.get(`/api/information/search_select/${this.select_title}`, {
      })
        .then(res => {
          this.select_content = res.data
          // console.log(this.select_content[0].information)
          setTimeout(() => {
            eventBus.$emit('select_content', this.select_content)
          }, 100)
          setTimeout(() => {
            eventBus.$emit('username', this.username)
          }, 100)
        })
    },
    //父母好帮手传送数据
    parent(index) {
      this.parent_title = this.parentInformation[index].title
      this.parent_troduction = this.parentInformation[index].troduction
      // console.log(this.parent_title)
      // console.log(this.parent_troduction)
      setTimeout(() => {
        eventBus.$emit('parent_title', this.parent_title)
      }, 100),
        setTimeout(() => {
          eventBus.$emit('parent_troduction', this.parent_troduction)
        }, 100)

      //   this.$axios.get(`/api/imgInformation/parentInformation/${this.parent_title}`, {
      //   })
      //     .then(res => {
      //       this.select_content = res.data
      //       // console.log(this.select_content[0].information)
      //       setTimeout(() => {
      //         eventBus.$emit('select_content', this.select_content)
      //       }, 100)
      //       setTimeout(() => {
      //         eventBus.$emit('username', this.username)
      //       }, 100)
      //     })
    },
    //主页名园传送数据
    main_garden(index) {
      setTimeout(() => {
        eventBus.$emit('garden_title', this.gInformation[index].title)
      }, 100),
        setTimeout(() => {
          eventBus.$emit('garden_troduction', this.gInformation[index].troduction)
        }, 100),
        setTimeout(() => {
          eventBus.$emit('garden_id', this.gInformation[index].id)
        }, 100)
    },
    //主页名师传送数据
    main_teacher(index) {
      // console.log(this.tInformation[index].title)
      setTimeout(() => {
        console.log(this.tInformation[0].title)
        eventBus.$emit('teacher_title', this.tInformation[index].title)
      }, 100),
        setTimeout(() => {
          eventBus.$emit('teacher_troduction', this.tInformation[index].troduction)
        }, 100),
        setTimeout(() => {
          eventBus.$emit('teacher_id', this.tInformation[index].id)
        }, 100)
    }

  },

}
</script>

<style scoped>
a {
  text-decoration: none;
  color: gray;
}

.pf {
  margin-left: 50px;
}

.pf1 {
  position: absolute;
  position: fixed;
  margin-top: 294px;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid gray;
  background-color: rgb(149, 245, 213);
}

.pf2 {
  margin-top: 231px;
}

.pf3 {
  margin-top: 262px;
}


.slider {
  margin-left: 260px;
  width: 800px;
  height: 500px;
}

.demonstration {
  margin-left: 200px;
  font-size: 40px;
  font-weight: bolder;
}

.ipt {
  position: absolute;
  top: 30px;
  left: 807px;
  height: 34px;
  width: 200px;
  border-radius: 37px 10px;
  outline: none;
}

.btn {
  position: absolute;
  top: 30px;
  left: 950px;
  width: 70px;
  border-radius: 37px 10px;
}

/* 轮播图 */
.el-carousel__item:nth-child(2n) {
  background-image: url(../assets/main_lbt1.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
}

.el-carousel__item:nth-child(2n+1) {
  background-image: url(../assets/main_lbt2.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
}



.star_title,
.garden_title {
  font-weight: bold;
  font-size: 20px;
}

.star {
  margin-left: 260px;
  margin-bottom: 20px;
}

/* 园长模块 */
.garden,
.parent,
.teacher {
  margin-top: 60px;
  margin-left: 260px;
  width: 800px;
}

.garden_image {
  float: left;
  width: 250px;
}

.garden_image2 {
  float: left;
  width: 250px;
  height: 185px;
}

/* 家长模块 */
.parent_box {
  width: 800px;
  height: 282px;
  box-shadow: 0px 0px 15px gray;
}

.parentBox {
  margin-left: 35px;
  margin-top: 20px;
  float: left;
  width: 344px;
  height: 111px;
}

/* 名师模块 */
.teacher1,
.teacher2 {
  float: left;
  margin-left: 36px;
  margin-top: 30px;
  width: 340px;
  height: 100px;
  box-shadow: 0 0 15px gray inset;
}

.teacher {
  margin-bottom: 50px;
}

/* 主页搜索框点击搜索 */
.main_search_title {
  font-size: 20px;
  font-weight: bolder;
}

.search {
  margin-left: 300px;
  width: 700px;
  border: 1px dashed gray;
}

.main_search_information {
  height: auto;
  width: 700px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.main_search_data {
  margin-left: 600px;
}
</style>
